<template>
  <label class="btn btn-circle swap">
    <!-- this hidden checkbox controls the state -->
    <input type="checkbox" v-model="value" />
    <span class="swap-on h-6 w-6" :class="onIcon"></span>
    <span class="swap-off h-6 w-6" :class="offIcon"></span>
  </label>
</template>
<script setup lang="ts">
import { useVModel } from "@vueuse/core";

interface Props {
  modelValue: boolean;
  onIcon: string;
  offIcon: string;
}
const props = defineProps<Props>();

const emit = defineEmits<{
  "update:modelValue": [value: boolean];
}>();

const value = useVModel(props, "modelValue", emit);
</script>
